<script setup>
import {ref} from "vue";
import {usePreviewZipStore} from "@/stores/previewZipStore.js";
import {usePreviewVideoStore} from "@/stores/previewVideoStore.js";
import {audioTypes, imageTypes, videoTypes, zipTypes} from "@/utils/viewType.js";
import {usePreviewImgStore} from "@/stores/previewImgStore.js";
import {usePreviewAudioStore} from "@/stores/previewAudioStore.js";
import * as fileApi from "@/api/fileApi.js"

const previewZipStore = usePreviewZipStore();

function handleRowDblclick(row, column, event) {
  if(row.name === '..') {
    previewZipStore.back()
    return
  }
  if(row.directory){
    previewZipStore.zip(row.absolutePath)
  }else {
    let index = row.absolutePath.lastIndexOf(".")
    if(index === -1) return;
    let suffix = row.absolutePath.substring(index + 1)
    let store = null
    if (videoTypes.has(suffix)) store = usePreviewVideoStore()
    if (imageTypes.has(suffix)) store = usePreviewImgStore()
    if(audioTypes.has(suffix)) store = usePreviewAudioStore()
    if(store === null) return;
    store.show = true
    store.title = row.name
    store.absolutePath = previewZipStore.absolutePath
    store.fileName = row.absolutePath
    store.preview()
  }
}

function type(directory) {
  if(directory === undefined) return ''
  return directory ? '文件夹' : '文件'
}

function downloadZipFile(absolutePath,fileName) {
  fileApi.downloadZipFile(absolutePath,fileName)
}

</script>

<template>
  <el-dialog
      v-model="previewZipStore.show"
      @close=""
      @open="previewZipStore.zip"
      :close-on-press-escape="true"
      :title="previewZipStore.title"
  >
    <el-table max-height="360" class="abc" :data="previewZipStore.fileList" @row-dblclick="handleRowDblclick">
      <el-table-column prop="name" label="文件名"></el-table-column>
      <el-table-column label="类型">
        <template #default="scope">
          {{type(scope.row.directory)}}
        </template>
      </el-table-column>
      <el-table-column prop="sizeStr" label="大小"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-if="scope.row.name !== '..'" type="text" @click="downloadZipFile(previewZipStore.absolutePath,scope.row.absolutePath)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style scoped>
.abc :deep(.el-table__body tr:hover > td) {
  cursor: pointer;
}
</style>